<template>
  <div class="foot">
    <div>
      <router-link to='/' >
          <span :class='{ isact: footerid===1 }' class="icon" @click='act(1)' >
            <i class="iconfont icon-eliaomo"></i>
          </span>
        <span :class='{ isact: footerid===1 }' @click='act(1)' >外卖</span>
      </router-link>
      <router-link to='/discover'>
        <span :class='{ isact: footerid===2 }' class="icon" @click='act(2)'>
          <i class="iconfont icon-faxian"></i>
        </span>
        <span :class='{ isact: footerid===2 }' @click='act(2)'>发现</span>
      </router-link>
      <router-link to='/order'>
        <span :class='{ isact: footerid===3 }' class="icon" @click='act(3)'>
          <i class="iconfont icon-order"></i>
        </span>
        <span :class='{ isact: footerid===3 }' @click='act(3)'>订单</span>
      </router-link>
      <router-link to='/personal'>
        <span :class='{ isact: footerid===4 }' class="icon" @click='act(4)'>
          <i class="iconfont icon-wode"></i>
        </span>
        <span :class='{ isact: footerid===4 }' @click='act(4)'>我的</span>
      </router-link>
    </div>
  
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'footer',
  data () {
    return {

    }
  },
  computed: {
    ...mapState(['footerid'])
  },
  methods: {
    act (id) {
      this.$store.commit('CHANGEFOOT', id)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';
.foot {
  width: 100%;
  height: px2rem(50);
  div {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: center;
    display: flex;
    height: px2rem(50);
    line-height: px2rem(50);
    border-top: px2rem(3) solid #fcfcfc;
    background-color: #fff;
  }
  a {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 0;
    text-align: center;
    .icon {
      display: inline-block;
      margin: 0 auto;
      width: px2rem(20);
      height: px2rem(20);
      i{
        font-size: px2rem(20);
      }
    }
    span {
      display: inline-block;
      font-size: px2rem(14);
      color: #999;
      height: px2rem(12);
      line-height: px2rem(12);
    }
    .isact{
      color: #0089dc;
    }
  }
}
</style>